<template>
  <div class="w" v-loading="loading">
    <div class="header">
      <i class="iconfont icon-fanhui" @click="back"></i>
      <span class="title">订单</span>
    </div>
    <div class="info">
      <div class="info_top">
        <div class="top_time">
          <span>交易剩余时间</span>
          <span>{{ count }}</span>
        </div>
        <div class="top_price">
          <span>￥</span>
          <span>{{ allPrice }}</span>
        </div>
        <div class="top_shop">
          <span>{{ shopName }}</span>
          <span @click="orders = true">订单详情</span>
          <span @click="orders = true"><i class="iconfont icon-jinrujiantou"></i></span>
        </div>
      </div>
      <div class="info_card">
        <div class="card" @click="active(1)">
          <div>
            <i class="iconfont icon-wechat-pay"></i>
            <span>微信支付</span>
          </div>
          <div class="radio" :class="radioActive == 1 ? 'radio_active' : ''">
            <i class="iconfont icon-duihao" v-if="radioActive == 1"></i>
          </div>
        </div>
        <div class="card" @click="active(2)">
          <div>
            <i class="iconfont icon-zhifubaozhifu"></i>
            <span>支付宝</span>
          </div>
          <div class="radio" :class="radioActive == 2 ? 'radio_active' : ''">
            <i class="iconfont icon-duihao" v-if="radioActive == 2"></i>
          </div>
        </div>
        <div class="card" @click="active(3)">
          <div>
            <i class="iconfont icon-Applepay"></i>
            <span>Apple Pay</span>
          </div>
          <div class="radio" :class="radioActive == 3 ? 'radio_active' : ''">
            <i class="iconfont icon-duihao" v-if="radioActive == 3"></i>
          </div>
        </div>
      </div>
      <div class="info_button" @click="summit">
        <el-button>确认付款</el-button>
      </div>
    </div>
    <div class="el-dialog">
      <el-dialog title="订单详情" :visible.sync="orders" width="350px">
        <div class="info_dialog">
          <div class="item">
            <div class="item_title">
              <span>收货地址</span>
            </div>
            <div class="item_info">
              <div class="info_title">
                <span>{{ addActive.address }}</span>
              </div>
              <div class="info_msg">
                <span>{{ addActive.people }}</span>
                <span v-if="addActive.sex == 0">(先生)</span>
                <span v-if="addActive.sex == 1">(女士)</span>
                <span>{{ addActive.phone }}</span>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item_title">
              <span>{{ shopName }}</span>
            </div>
            <div class="item_info">
              <div class="info_list" v-for="(item, index) in shoppingCart" :key="index">
                <span>{{ item.dishName }}</span>
                <span>×{{ item.number }}</span>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item_title">
              <span>优惠</span>
            </div>
            <div class="item_info">
              <div class="info_discounts">
                <span>已优惠</span>
                <div>
                  <span>￥</span>
                  <span>{{ discounts }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item_title">
              <span>备注信息</span>
            </div>
            <div class="item_info">
              <span v-if="remarks == ''">无</span>
              <span v-else>{{ remarks }}</span>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopName: '',
      shoppingCart: [],
      addActive: [],
      radioActive: 0,
      count: '',
      seconds: 900,
      orders: false,
      allPrice: 0,
      discounts: 0,
      remarks: '',
      orderId: '',
      loading: false,
      nIntervId: null,
    };
  },

  created() {
    this.payReturn();
    this.shopName = this.$route.query.shopName;
    this.shoppingCart = this.$route.query.shoppingCart;
    this.addActive = this.$route.query.address;
    this.allPrice = this.$route.query.totalPrice;
    this.discounts = this.$route.query.discounts;
    this.remarks = this.$route.query.remarks;
    this.orderId = this.$route.query.orderId;
    console.log(this.orderId);
    this.Time();
  },

  methods: {
    payReturn() {
      if (this.$route.query.out_trade_no && this.$route.query.trade_no) {
        this.$router.push('/paySuccess');
      }
    },
    async summit() {
      const url = `http://localhost:8080/school/aliPay/payConfirm?traceNo=${this.orderId}&totalAmount=${this.allPrice}&subject=${this.shopName}`;
      window.open(url);
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.$router.push('/orders');
      }, 10000);
    },
    //定时器没过1秒参数减1
    Time() {
      if (!this.nIntervId) {
        this.nIntervId = setInterval(() => {
          this.seconds -= 1;
          this.countDown();
        }, 1000);
      }
    },
    // 天 时 分 秒 格式化函数
    countDown() {
      if (this.seconds <= 0) {
        clearInterval(this.nIntervId);
        this.nIntervId = null;
        this.$router.push('/');
        return this.$message.error('支付超时，请重新选择商品');
      }
      let m = parseInt((this.seconds / 60) % 60);
      m = m < 10 ? '0' + m : m;
      let s = parseInt(this.seconds % 60);
      s = s < 10 ? '0' + s : s;
      this.count = m + ':' + s;
    },
    back() {
      this.$router.push('/orders');
    },
    active(index) {
      if (index == 1 || index == 3) {
        return this.$message.success('该支付方式暂未接入，敬请期待');
      }
      this.radioActive = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  position: relative;
  background-color: #f4f4f4;
  .header {
    height: 61px;
    color: #232425;
    text-align: center;
    position: relative;
    border-bottom: 2px solid #dddddd;
    .icon-fanhui {
      position: absolute;
      font-size: 25px;
      line-height: 61px;
      left: 10px;
      font-weight: bold;
    }
    .title {
      font-size: 20px;
      line-height: 61px;
      font-weight: bold;
    }
  }
  .info {
    padding: 0px 15px;
    .info_top {
      height: 150px;
      text-align: center;
      margin-top: 30px;
      .top_time {
        color: #909090;
        span:nth-child(1) {
          margin-right: 10px;
        }
      }
      .top_price {
        color: #000000;
        font-weight: bold;
        span:nth-child(1) {
          font-size: 15px;
        }
        span:nth-child(2) {
          font-size: 30px;
        }
      }
      .top_shop {
        color: #9a9a9a;
        span:nth-child(1) {
          margin-right: 10px;
        }
        span:nth-child(2) {
          margin-right: 5px;
        }
      }
    }
    .info_card {
      background-color: #fefefe;
      border-radius: 10px;
      padding: 15px;
      div:nth-child(2) {
        margin-bottom: 25px;
        margin-top: 25px;
      }
      .card {
        font-size: 19px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        div:nth-child(1) {
          display: flex;
          align-items: center;
        }
        .icon-wechat-pay {
          font-size: 35px;
          margin-right: 10px;
          color: #08d800;
        }
        .icon-zhifubaozhifu {
          font-size: 30px;
          margin-right: 10px;
          margin-left: 3px;
          color: #3386fc;
        }
        .icon-Applepay {
          font-size: 30px;
          margin-right: 10px;
          margin-left: 3px;
          color: #201f1f;
        }
        .radio {
          height: 20px;
          width: 20px;
          border-radius: 50px;
          border: 1px solid #e9e9e9;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .radio_active {
          background-color: #fec306;
        }
      }
    }
    .info_button {
      margin-top: 220px;
      :deep(.el-button) {
        border-radius: 50px;
        background-color: #ffc200;
        width: 100%;
        margin-top: 20px;
        border: none;
        color: #000000;
      }
    }
  }

  .el-dialog {
    :deep(.el-dialog__header) {
      border-bottom: 1px solid #ebebeb;
    }
    .info_dialog::-webkit-scrollbar {
      display: none;
    }
    .info_dialog {
      height: 300px;
      overflow: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      .item {
        border-bottom: 2px solid #f9f9f9;
        margin-bottom: 10px;
        .item_title {
          font-size: 17px;
          color: #000000;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .item_info {
          color: #bcbcbc;
          margin-bottom: 20px;
          .info_title {
            margin-bottom: 5px;
          }
          .info_msg {
            span:nth-child(2) {
              margin-right: 5px;
            }
          }
          .info_list {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .info_discounts {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
    .item {
      border-bottom: 2px solid #f9f9f9;
      margin-bottom: 10px;
      .item_title {
        font-size: 17px;
        color: #000000;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .item_info {
        color: #bcbcbc;
        margin-bottom: 20px;
        .info_title {
          margin-bottom: 5px;
        }
        .info_msg {
          span:nth-child(2) {
            margin-right: 5px;
          }
        }
        .info_list {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .info_discounts {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    .item:last-child {
      border: none;
    }
  }
}
</style>